import { getNews } from 'api/home'
import React, { Component } from 'react'
import { getCityCurrent } from 'utils/storage'
import styles from './index.module.scss'
import { Image } from 'antd-mobile'
import { BASE_URL } from 'utils/url'
export default class News extends Component {
  state = {
    newsData: [],
  }
  componentDidMount() {
    this.loadNews()
  }
  render() {
    return (
      <div className={styles.news}>
        <h2 className="title">最新资讯</h2>
        <ul className="con">
          {this.state.newsData.map((item) => (
            <li key={item.id}>
              <div className="img">
                <Image src={BASE_URL + item.imgSrc} />
              </div>
              <div className="text">
                <h3>{item.title}</h3>
                <p>
                  <span>{item.from}</span>
                  <span>{item.date}</span>
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    )
  }
  loadNews = async () => {
    try {
      const area = getCityCurrent()?.value || 'AREA|88cff55c-aaa4-e2e0'
      const { body: res } = await getNews({ area })
      this.setState({
        newsData: res,
      })
    } catch (err) {}
  }
}
